阿嬤都看得懂的開始寫第一支 .css 檔案囉！

昨天我們介紹了怎麼使用 style 標籤，把所有 CSS 樣式獨立收整到檔案最前面。這樣做固然更加清楚明晰，但是要上上下下對照這些選擇器和標籤，也是很麻煩勞心的工作。這樣不行啊！不是說工程師都很懶嗎？我就是因為這樣，才讓我阿嬤來當工程師的耶！

沒錯，所以更多時候，我們連 style 標籤都不用，而是會把整個 CSS 都拆出來，變成 .css 的檔案。那就讓我們先把上面這個檔案的 CSS 拆成另個檔案吧！我們先把整個 style 標籤剪下來，然後貼在另個新的記事本上。同樣地，選擇儲存成所有檔案，然後檔名就取 "gavagai_style.css" 吧！

等等，那拆出來以後，我原本的 .html 檔怎麼知道，它要去哪個 .css 檔案找這些 HTML 標籤對應的樣式呢？我要寫些什麼文字，才能告訴瀏覽器怎麼這個檔案呢？

沒關係，先不管我們用什麼文字告訴瀏覽器這個資訊，這段文字應該被渲染出來嗎？不應該對吧。這個情境是不是似曾相識呢？

是的，就像前面我們引入 style 這個特殊標籤一樣，我們又需要引入其他特殊標籤囉！這個標籤叫作

• link，意思就是連結到其他檔案。不過，既然是要連結到其他檔案，我們至少必須告訴瀏覽器
  1. 這個檔案在哪裡：我們會在 link 標籤中，加上 href 字樣，並且在後面加上等於以後，再加上想引入檔案的位址。href 的 "h" 是 "hyper"，超連結的「超」，只是個炫炮的說法，"ref" 是 "reference"，意思是參考，所以就是請瀏覽器參考這個位置來找檔案的意思。這個檔案位址可能是網址，也可能是某個資料夾。
     那麼，如果是想引用某個資料夾中的檔案，應該怎麼辦呢？讓我們對著想引用的檔案按右鍵後，選內容
     
     就可以在「位置」這邊看到檔案夾的路徑囉！
     
     因此，這個檔案在 link 標籤中的引入方式，就會是

href="D:\鐵人賽\06\gavagai_style.css"

沒錯，不過，當我們把要引入的檔案，例如這邊的 gavagai_style.css，和引用檔案的檔案，例如這邊的 gavagai.html，放在同個資料夾中時，我們可以偷懶，只寫檔名就好：

href="gavagai_style.css"

2. 另外，就算瀏覽器知道去哪邊引入檔案，瀏覽器還是不知道這個檔案引進來之後要幹嘛，所以我們也必須告訴瀏覽器，這個檔案和現在渲染網頁的關係是什麼。關係的英文是 relationship，我們偷懶只寫前 3 個字母 rel 就可以了。現在引入這個檔案，是想當作樣式表 (stylesheet) 來使用。因此，我們會這樣寫

rel="stylesheet"

綜合上面這些討論，我們可以發現，我們的 link 標籤長這樣：

	<link href="gavagai_style.css" rel="stylesheet">

讓我們把這個 link 標籤放到 gavagai.html 這個檔案的最上方：

<link href="gavagai_style.css" rel="stylesheet">
<div>
	<div class="gavagai">區塊一</div>
	<div class="gavagai" style="background-color:violet">區塊二</div>
	<div class="gavagai">區塊三</div>
	<div class="gavagai">區塊四</div>
</div>

儲存檔案，然後再開啟看看，就會發現同樣的結果囉！不過整個檔案看起來，是不是清爽多了呢？

不知道大家是否有感覺，在今天的討論過程中，我們逐漸將樣式從元件中抽離出來，進行獨立的書寫與管理。當然，某部分原因是工程師都很懶，不想一直複製貼上。不過，我們也可以思考看看：假使在上面的例子中，我們都還是使用行內樣式，不把樣式獨立成分類，而是每個 div 標籤就寫一次樣式。結果客戶突然說，所有區塊都需要改成寬高都 80px，而非原本的 100px，這時候，我們就需要改 4 次。那還是因為我們只有 4 個區塊喔，如果我們有 100 個區塊，我們就需要改 100 次了！不過，因為我們把樣式抽離出來，變成分類了，我們就只要改 1 次就搞定了！這樣有體會到 DRY 的妙處嗎？

工程師都很懶，也因此我們必須很聰明。把不同功能的程式碼獨立拆開，各司其職，通常是個方便管理、修改、與擴充的聰明方法。

想一想：當我們把被引用的檔案 A，以及引用 A 檔案的檔案 B，都放在同個資料夾時，我們可以直接在 B 裡面，寫上 A 的檔名，電腦就會知道要找同資料夾中，檔名為 A 的檔案。這種方法不寫出完整路徑，而是相對著檔案 B 所處的資料夾。那麼，我們是否可以有其他相對的方式，來更方便地引用檔案呢？例如，如果檔案 A 是放在檔案 B 的上一層資料夾，或者下一層資料夾，我們是否也有這種相對路徑的檔案引用方式？